<template>
  <div>
    <account-card slot="btn" title="商品分类">
      <el-button
        slot="btn"
        type="primary"
        @click="dialogFormVisible = true"
        size="small"
        >添加分类</el-button
      >
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          label="序号"
          type="index"
          width="180px"
        ></el-table-column>
        <el-table-column label="分类名称">
          <template slot-scope="scope">
            <label v-show="!scope.row.isedit">{{ scope.row.cateName }}</label>
            <el-input
              v-show="scope.row.isedit"
              v-model="scope.row.cateName"
              size="small"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="是否启用">
          <template slot-scope="scope">
            <el-switch
              :disabled="!scope.row.isedit"
              v-model="scope.row.state"
              active-color="#13ce66"
              inactive-color="#ff4949"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              v-show="!scope.row.isedit"
              @click="changeEdit(scope.row)"
              size="mini"
              >编辑</el-button
            >
            <el-button
              v-show="scope.row.isedit"
              @click="changeClass(scope.row)"
              size="mini"
              type="success"
              style="margin: 0"
              >完成</el-button
            >
            <el-popconfirm
              confirm-button-text="好的"
              cancel-button-text="不用了"
              icon="el-icon-info"
              icon-color="red"
              title="这是一段内容确定删除吗？"
              @confirm="handleDelete(scope.row)"
            >
              <el-button
                size="mini"
                type="danger"
                class="delbtn"
                slot="reference"
                style="margin-left:10px"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="sizechange"
        @current-change="pagechange"
        :current-page="currentPage"
        :page-sizes="[1, 3, 5, 10, 20]"
        :page-size="pageSize"
        layout="total,sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>

      <!-- 模态框 -->
      <el-dialog
        width="400px"
        title="添加分类"
        class="goods-class-dialog"
        :visible.sync="dialogFormVisible"
      >
        <el-form :model="form">
          <el-form-item label="分类名称" :label-width="formLabelWidth">
            <el-input
              size="small"
              v-model="form.name"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="是否启用" :label-width="formLabelWidth">
            <el-switch
              v-model="form.region"
              active-color="#13ce66"
              inactive-color="#ff4949"
            ></el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addClass">确 定</el-button>
        </div>
      </el-dialog>
    </account-card>
  </div>
</template>

<script>
import { catelist, addcate, delcate, editcate } from "@/apis/goods.js";
import AccountCard from "../../../components/accountcard/AccountCard.vue";
export default {
  data() {
    return {
      tableData: [],
      form: {
        name: "",
        region: true,
      },
      value: true,
      currentPage: 1, // 当前页
      pageSize: 5, //每页条数
      total: 3, // 总数据条数
      formLabelWidth: "80px",
      dialogFormVisible: false,
    };
  },
  methods: {
    //获取数据
    getData() {
      catelist({ currentPage: this.currentPage, pageSize: this.pageSize })
        .then((res) => {
          // console.log(res.data);
          for (let obj of res.data.data) {
            obj.state = obj.state == 1;
            obj.isedit = false;
          }
          this.tableData = res.data.data;
          this.total = res.data.total;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //添加分类
    addClass() {
      this.dialogFormVisible = false;
      console.log(this.form.region);
      addcate({ cateName: this.form.name, state: this.form.region })
        .then((res) => {
          console.log(res);
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.getData();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //编辑行内样式
    changeEdit(row) {
      row.isedit = true;
    },
    //保存行内样式
    changeClass(row) {
      editcate({ id: row.id, cateName: row.cateName, state: row.state }).then(
        (res) => {
          console.log(res.data);
        }
      );
      row.isedit=false
    },
    //当前页
    sizechange(val) {
      this.pageSize = val;
      this.getData();
    },
    //切换页面
    pagechange(val) {
      this.currentPage = val;
      this.getData();
    },
    //删除
    handleDelete(row) {
      delcate({ id: row.id })
        .then((res) => {
          console.log(res.data);
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getData();
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  components: {
    AccountCard,
  },
  created() {
    this.getData();
  },
};
</script>

<style lang="less" scoped>
</style>